
<!DOCTYPE html>
<html>

	<head>
		<title>HTML5 Drag and Drop</title>
	</head>

	<body>
		<div id="drag1" draggable="true" ondragstart="drag(event)">Drag me</div>
		<div id="drag2" draggable="true" ondragstart="drag(event)">Drag me too</div>
		<div id="drop" ondrop="drop(event)" ondragover="allowDrop(event)">Drop
			here</div>

		<script>
		function drag(event) {
			event.dataTransfer.setData("text", event.target.id);
		}

        function allowDrop(event) {
			event.preventDefault();
		}

		function drop(event) {
			var data = event.dataTransfer.getData("text");
			event.target.appendChild(document.getElementById(data));
		}
	</script>

	</body>

</html>

<!-- https://www.runoob.com/html/html5-draganddrop.html -->
